<template>
  <el-dialog v-model="viewDialogVisible" :title="title" width="600px" append-to-body @close="handleClose">
    <div class="header">
      <el-row>
        <el-col :span="12">
          <h3>需求管理基本信息</h3>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <div v-if="!localIsEdit">
            <el-button @click="localIsEdit = true">编辑</el-button>
          </div>
          <div v-else>
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="localIsEdit = false">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-form label-width="120px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="需求id">
            <el-input v-model="form.reqId" :disabled="!localIsEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="父需求id">
            <el-input v-model="form.parentReqId" :disabled="!localIsEdit" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            <el-input v-model="form.createTime" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="需求名称">
            <el-input v-model="form.reqName" :disabled="!localIsEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="需求描述">
        <el-input type="textarea" v-model="form.reqDesc" :disabled="!localIsEdit" />
      </el-form-item>
      <el-form-item label="附件">
        <el-upload disabled :file-list="form.attachments" action="#" list-type="text" />
      </el-form-item>

      <el-tabs type="border-card">
        <el-tab-pane v-for="(tab, index) in tabConfig" :key="index" :label="tab.label">
          <el-form-item>
            <el-table :data="form.relatedItems" disabled style="width: 100%">
              <el-table-column v-for="(col, colIndex) in tab.columns" :key="colIndex" :prop="col.prop" :label="col.label" />
            </el-table>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  title: String,
  isEdit: Boolean
});
const localIsEdit = ref(props.isEdit);

const viewDialogVisible = defineModel();

const form = ref({
  reqId: '',
  creator: '',
  reqName: '',
  parentReqId: '',
  createTime: '',
  reqDesc: '',
  principle: '',
  attachments: [],
  relatedItems: []
});

const tabConfig = ref([
  {
    label: '需求代码', // 标签名
    columns: [
      { prop: 'codeId', label: '代码id' },
      { prop: 'codeName', label: '代码名称' },
      { prop: 'creator', label: '创建人' },
      { prop: 'updateTime', label: '更新时间' },
    ]
  },
  {
    label: '模型',
    columns: [
      { prop: 'modelId', label: '模型id' },
      { prop: 'modelName', label: '模型名称' },
      { prop: 'creator', label: '创建人' },
      { prop: 'updateTime', label: '更新时间' },
    ]
  },
  {
    label: '测试用例',
    columns: [
      { prop: 'testCaseId', label: '测试用例id' },
      { prop: 'testCaseName', label: '测试用例名称' },
      { prop: 'creator', label: '创建人' },
      { prop: 'updateTime', label: '更新时间' },
    ]
  },
  {
    label: '测试规程',
    columns: [
      { prop: 'testPlanId', label: '测试规程id' },
      { prop: 'testPlanName', label: '测试规程名称' },
      { prop: 'creator', label: '创建人' },
      { prop: 'updateTime', label: '更新时间' },
    ]
  }
]);

watch(
  [() => props.isEdit, () => props.data],
  ([newIsEdit, newData]) => {
    localIsEdit.value = newIsEdit;
    form.value = { ...form.value, ...newData };
  },
  { immediate: true }
);

// 关闭对话框时触发事件，通知父组件
const emits = defineEmits(['close']);
const handleClose = () => {
  viewDialogVisible.value = false;
  emits('close');
};
</script>
